<template>
    <div>
        <div class="linkTable module-body">
            <el-table :data="applyData" style="width: 100%" size="mini">
                <el-table-column prop="linkname" label="友情链接" width="180">
                </el-table-column>
                <el-table-column prop="url" label="链接地址" width="180">
                </el-table-column>
                <el-table-column prop="desc" label="友链简介">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="success" icon="el-icon-check" size='mini' circle></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="linkTable module-body">
            <el-row class="add-button">
                <el-button type="primary" size="small" icon="el-icon-plus"  @click="showCheckDialog">添加友链</el-button>
            </el-row>
            <el-table :data="linkList" style="width: 100%" size="mini">
                <el-table-column prop="linkname" label="友情链接" width="180">
                </el-table-column>
                <el-table-column prop="url" label="链接地址" width="180">
                </el-table-column>
                <el-table-column prop="desc" label="友链简介">
                </el-table-column>
                <el-table-column prop="status" label="启用">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="primary" icon="el-icon-edit" size='mini' circle @click="showCheckDialog(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size='mini' circle @click="deleteLink"></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="添加&编辑友链" :visible.sync="checkVisibale" label-width="120px" width="30%">
          <edit-link></edit-link>
        </el-dialog>
    </div>
</template>

<script>
import editLink from "./editLink.vue";
export default {
  name: 'linkList',
  components: {
    editLink    
    },
  data() {
    return {
      checkVisibale: false,
      checkId: 0,
      applyData: [
        {
          linkname: "2016-05-02",
          url: "王小虎",
          desc: "上海市普陀区金沙江路 1518 弄",
          
        },
        {
          linkname: "2016-05-02",
          url: "王小虎",
          desc: "上海市普陀区金沙江路 1518 弄",
        },
        {
          linkname: "2016-05-02",
          url: "王小虎",
          desc: "上海市普陀区金沙江路 1518 弄",
        },
        {
          linkname: "2016-05-02",
          url: "王小虎",
          desc: "上海市普陀区金沙江路 1518 弄",
        }
      ],
      linkList: [
        {
          id: 1,
          linkname: "2016-05-02",
          url: "王小虎",
          desc: "上海市普陀区金沙江路 1518 弄",
          status: true,
        },
        {
          id: 2,
          linkname: "2016-05-02",
          url: "王小虎",
          desc: "上海市普陀区金沙江路 1518 弄",
          status: true,
        },
        {
          id: 3,
          linkname: "2016-05-02",
          url: "王小虎",
          desc: "上海市普陀区金沙江路 1518 弄",
          status: false,
        },
      ]
    };
  },
  methods: {
    deleteLink() {
        this.$swal({
           text: '你确定要删除此内容吗？',
           confirmButtonText:'删除'
        }).catch(this.$swal.noop).then(function() {
            console.log(111);
        //    this.$swal({
        //     type:'success',
        //     text: '已删除！',
        //     timer: 1000,
        //      "showConfirmButton": false,
        //      "showCancelButton": false,
        //    });
        });
    },
    showCheckDialog(row = '') {
        this.checkVisibale = true;
        this.checkId = row != '' ? 0 : row.id
        console.log(this.checkId)
    },
    changeShow(data) {
       console.log(1111);
        console.log(data);
        this.show = data
    }
  }
};
</script>

<style lang="scss" scoped>
</style>


